<template>
    <el-tabs v-model="params.category" type="card" @tab-click="handleClick" class="top-tab-panel">
        <el-tab-pane v-for="(item,index) in tabsList" :key="'tab' + index" :name="item.key+''">
            <span slot="label">{{item.display}}</span>
            <div v-if="params.category == item.key">
				<!-- 主类型列表 -->
                <list-table v-if="!item.hasSub" :params="{ category: params.category, subCategory: '-1' }"></list-table>
                <el-tabs v-else v-model="params.subCategory" @tab-click="handleClick" class="child-tab-panel">
                    <el-tab-pane v-for="(res,ins) in item.subCategories" :key="'childTab' + ins" :name="res.key+''">
                        <span slot="label">{{res.display}}</span>
						<!-- 子类型列表 -->
                        <list-table v-if="params.subCategory == res.key" :params="params"></list-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-tab-pane>

    </el-tabs>
</template>

<script>
import ApiTask from './api';
import ListTable from './listTable.vue'
export default {
    name: 'taskList',
    components: {
        ListTable
    },
    data() {
        return {
            tabsList: [],
            params: {
                category: '1',
                subCategory: '11'
            }
        };
    },
    created() {
        //初始化获取顶部tab
        this.getBhtTaskIndex();
        ;
    },
    methods: {
        handleClick(tab, event) {
           /* if (this.params.category == '1') {
                this.params.subCategory = '11';
            }*/
        },
        getBhtTaskIndex() {
            // let category = {};
            // let categoryStorage = localStorage.getItem('category');

            // if (categoryStorage) {
            //     category = JSON.parse(categoryStorage);
            // }

            ApiTask.listTabs().then(res => {
                console.log('tabsres',res)
                let data = res.data;
                data.data[0].subCategories.splice(3,1)
                data.data[0].subCategories[2].display = '我关注的'
                if (data.code === 0) {
                    this.tabsList = data.data;
                    this.params.category = this.tabsList[0].key + '';
                    if (this.tabsList[0].hasSub) {
                        this.params.subCategory = this.tabsList[0].subCategories[0].key + '';
                    }
                }
            })
        }
    },
    watch: {
        'params.category': {
            handler: function(val) {
                if(val == '1') {
                    this.params.subCategory = '11';
                }
            },
            deep: true
        }
    }
}

</script>
<style lang="scss" scoped>
    .top-tab-panel /deep/ .el-tabs__header {
        margin-bottom: 0;
    }
    .top-tab-panel /deep/ .el-tabs__nav-scroll {
        background: #0F4893;
        height: 60px;
        .el-tabs__nav {
            border: none;
            .el-tabs__item {
                color: #fff;
                height: 60px;
                line-height: 60px;
                text-align: center;
                width: 116px;
                border: none;
                padding: 0 20px;
            }
            .is-active {
                background-color: #053779;
            }
        }
    }
    .top-tab-panel, .child-tab-panel {
        background: #F6F8FB;
    }
    .child-tab-panel /deep/ .el-tabs__nav-scroll {
        background-color: #fff;
        height: 50px;
        .el-tabs__nav {

            .el-tabs__item {
                height: 50px;
                line-height: 50px;
                color: #000;
            }
            .is-active {
                background-color: transparent;
                color: #0F4893;
            }
        }
    }
    .child-tab-panel /deep/ .el-tabs__nav-wrap::after {
        height: 2px;
    }

</style>
